const imageSliderSection = document.getElementById('image-slider-section');
const imageSliderUl = document.getElementById('image-slider-ul');
const images = document.querySelectorAll('#image-slider-ul img');
let slideIndex = 0;
let intervalId;

function startSlider() {
  intervalId = setInterval(() => {
    slideIndex++;
    if (slideIndex >= images.length) {
      slideIndex = 0;
    }
    const translateX = -slideIndex * images[0].width;
    imageSliderUl.style.transform = `translateX(${translateX}px)`;
  }, 1000);
}

function stopSlider() {
  clearInterval(intervalId);
}

imageSliderSection.addEventListener('mouseenter', stopSlider);
imageSliderSection.addEventListener('mouseleave', startSlider);

startSlider();